<template>
  <div class="handle-table-box">
    <!--#region-->
    <!--<div class="search-box">-->
    <!--  <el-input-->
    <!--      v-model="searchKeyWord"-->
    <!--      style="width: 15vw; margin-right: 1vw"-->
    <!--      placeholder="请输入申请人姓名"-->
    <!--  />-->
    <!--  <el-button-->
    <!--      type="primary"-->
    <!--      @click="getFlowListByName"-->
    <!--  >-->
    <!--    搜索-->
    <!--  </el-button>-->
    <!--  <el-button-->
    <!--      @click="cancelSearch"-->
    <!--  >取消</el-button>-->
    <!--</div>-->
    <!--#endregion-->

    <el-table
        :data="tableData"
        stripe
        style="width: 100%;height: 91vh;"
        border
        max-height="91vh"
        empty-text="暂无数据"
    >
      <el-table-column
          fixed
          prop="seal_flow_id"
          label="ID"
          width="200"
          align="center"
      />
      <el-table-column
          prop="uploaderName"
          label="申请人"
          width="150"
          align="center"
      />
      <el-table-column
          label="申请时间"
          width="120  "
          align="center"
      >
        <template #default="{row}">
          {{computeDate(row.created_at)}}
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          align="center"
          width="120"
      >
        <template #default="{row}">
          <el-tag type="info" v-if="row.seal_flow_status === 0">已提交</el-tag>
          <el-tag type="warning" v-else-if="row.seal_flow_status === 1">审批中</el-tag>
          <el-tag type="warning" v-else-if="row.seal_flow_status === 2">已完成</el-tag>
          <el-tag type="info" v-else-if="row.seal_flow_status === 3">已撤销</el-tag>
          <el-tag type="warning" v-else-if="row.seal_flow_status === 4">驳回待修改</el-tag>
          <el-tag type="info" v-else-if="row.seal_flow_status === 5">修改待审批</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="当前结果"
          align="center"
          width="120"
      >
        <template #default="{row}">
          <el-tag type="warning" v-if="row.seal_flow_result === 0">拒绝</el-tag>
          <el-tag type="success" v-else-if="row.seal_flow_result === 1">通过</el-tag>
          <el-tag type="info" v-else>暂无结果</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="operatorName"
          label="当前/最后审批人"
          align="center"
          width="150"
      />
      <el-table-column
          label="是否外借"
          align="center"
          width="100"
      >
        <template #default="{row}">
          <el-tag type="warning" v-if="row.seal_take === 0">否</el-tag>
          <el-tag type="success" v-else-if="row.seal_take === 1">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="是否归还"
          align="center"
          width="100"
      >
        <template #default="{row}">
          <el-tag type="warning" v-if="row.seal_flow_return === 0">未归还</el-tag>
          <el-tag type="success" v-else-if="row.seal_flow_return === 1">已归还</el-tag>
          <el-tag type="info" v-else-if="row.seal_flow_return === null">未借出</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="seal_flow_use_number"
          label="盖章次数"
          align="center"
          width="100"
      />
      <el-table-column
          label="理由/说明/备注"
          width="400"
          align="center"
      >
        <template #default="{row}">
          {{ row.seal_subject ? row.seal_subject : '-'}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
      >
        <template #default="{row}">
          <el-button
              v-if="row.seal_flow_return === 0 && row.operatorName === userInfo.id"
              type="primary"
              size="small"
              @click="returnSeal(row.seal_flow_id)"
          >
            归还印章
          </el-button>
          <el-button
              type="primary"
              size="small"
              @click="doCheck(row.seal_flow_id)"
              v-if="row.operatorName === userInfo.id && (row.seal_flow_status === 0 || row.seal_flow_status === 1 || row.seal_flow_status === 5)"
          >
            审批
          </el-button>
          <el-button
              type="primary"
              size="small"
              @click="previewApprove(row.seal_flow_id)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <HandleDialog ref="handleALL" @reloadAll="getFlowList"/>

  <PreViewDialog ref="previewDia"/>
</template>

<script setup>
import {ElButton, ElInput, ElTable, ElTableColumn, ElTag} from "element-plus"
import HandleDialog from "@/components/Common/OA/Seal/HandleDialog.vue"
import PreViewDialog from "@/components/Common/OA/Seal/PreviewSealDialog.vue"
import {getMyOperateApprove} from "@/api/OA/Seal"
import {onMounted, ref} from "vue"
import {computeDate, createMsg, getUserInfo} from "@/lib/utils"
import emitter from "@/lib/eventBus"
import {useRoute, useRouter} from "vue-router"

const route = useRoute()
const router = useRouter()
const handleALL = ref()
const previewDia = ref()

const tableData = ref([])
let userInfo = {}

onMounted(()=>{
  emitter.emit('home_menu','/OA/seal/handle')
  emitter.emit('updateMyHandleSeal','/OA/seal/handle/all')
  if (route.path !== '/OA/seal/handle/all') router.push('/OA/seal/handle/all')
  userInfo = getUserInfo()
  getFlowList()
})

const getFlowList = async () => {
  try {
    const {data:res} = await getMyOperateApprove(userInfo.id)
    if (res.code === 200){
      tableData.value = res.data
    } else if (res.code === 201){
      tableData.value = []
      // createMsg('暂无数据','info',true)
    } else if (res.code === 400 ||res.code === 401 ||res.code === 402){
      tableData.value = []
      createMsg('未查询到数据','info',true)
    }
  } catch (e) {
    console.log(e)
  }
}

const doCheck = (id) => {
  handleALL.value.showDetails(id)
}

const previewApprove = async (id) => {
  previewDia.value.showDetails(id)
}
</script>

<style scoped lang="less">

</style>
